

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>webpack - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="webpack">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-12-02 09:10" pubdate>
        2021年12月2日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      5.9k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      77
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">webpack</h1>
            
            <div class="markdown-body">
              <blockquote>
<p>经过我们一期项目以后，我们可以在项目当中发现一些问题</p>
<ol>
<li><p>一个网页当中的CSS文件及JS文件比较多，我们都需要通过<code>script</code>或<code>link</code>标签去导入，这样会导致页面请求次数过多</p>
</li>
<li><p>因为是在浏览器运行，我们的JS代码不能使用最新的语法，只能使用ES5去进行，因为要考虑到兼容性</p>
</li>
<li><p>我们的页面里面会有很多的CSS3的代码，这些代码都是有兼容性的，需要添加特定的前缀来实现效果</p>
<ul>
<li><code>-ms-</code>微软的浏览器</li>
<li><code>-moz-</code>火狐浏览器</li>
<li><code>-webkit-</code>谷歌核心浏览器</li>
<li><code>-o-</code>欧朋浏览器</li>
</ul>
<p>针对这个特点，我们不可以在编写代码的时候同时添加这么多前缀 ，所以怎么办呢？</p>
</li>
<li><p>同一个JS文件在不同的页面都进行了导入，能否只导入一次或按需加载</p>
</li>
</ol>
<p>要处理上面的处理，我们就需要一种新的技术，这种技术叫打包技术</p>
<p>目前现行的模块化打包技术有如下几个</p>
</blockquote>
<h2 id="一、Webpack是什么的？"><a href="#一、Webpack是什么的？" class="headerlink" title="一、Webpack是什么的？"></a>一、Webpack是什么的？</h2><p>就目前来说打包工具有很多</p>
<ol>
<li><code>gulp</code>：用代码方式来写打包脚本，并且代码采用流式(stream)的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口，运用相当简单。更易于学习和使用，使用gulp的代码量能比grunt少一半左右。</li>
<li><code>Grunt</code>：最老牌的打包工具，它运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，认知成本高，运用的时候需要明白各种插件的配置规则。</li>
<li><code>Webpack</code>: 是模块化管理工具和打包工具。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片等。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。它定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一个职能的工具，可以配合使用。</li>
<li><code>Rollup</code>：下一代 ES6 模块化工具，最大的亮点是利用 ES6 模块设计，利用 tree-shaking生成更简洁、更简单的代码。一般而言，对于应用使用 Webpack，对于类库使用 Rollup；需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 CommonJS 模块的依赖时，使用 webpack。代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup。【Vite】</li>
</ol>
<p>现在的主流打包工具里面还是在使用webpack,可以将webpack看成是下面的一张图</p>
<p><img src="https://pic.imgdb.cn/item/6189116b2ab3f51d91883cbf.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211108110347239"></p>
<p>它可以将很多松散的资源打包在一起，可以实现按需加载，同时在打包的过程当中还可以加载第三方插件来实殃一些特殊的效果，如提高CSS的兼容性，如将ES6代码转换成兼容性比较高的ES5代码</p>
<blockquote>
<p>我们可以把webpack看成是一个项目经理，它本身不干任何事情，它如果要干事情就会找到三方的人（也就是第三方模块插件）来完成</p>
</blockquote>
<p>目前最新版的webpack已经到了5的版本，具体的文件可以参考<a target="_blank" rel="noopener" href="https://webpack.docschina.org/concepts/">概念 | webpack 中文文档 (docschina.org)</a></p>
<h2 id="二、webpack的四大核心"><a href="#二、webpack的四大核心" class="headerlink" title="二、webpack的四大核心"></a>二、webpack的四大核心</h2><ol>
<li>入口<code>entry</code></li>
<li>出口<code>output</code></li>
<li><code>loader</code>模块</li>
<li><code>plugins</code>插件</li>
</ol>
<p>入口决定了程序在什么地方开始，出决定了程序从打包以后生成在什么地方，loader决定了当前你使用什么规则来处理你的代码，插件决定你具备什么哪些第三方的功能</p>
<blockquote>
<p>我们现在使用一个很形象的比较来说明</p>
<p>入口决定项目从什么地方开始</p>
<p>出口决定项目最终交付给谁</p>
<p>loader决定了内部干事情的方式，如前端人员写前端代码，后端人员写后端代码，UI设置界面，测试负责编写测试用例，运维负责维护</p>
<p>plugins属于外包环节，如有些功能自己做不了，但是也不想招人，则外包给第三方机构</p>
</blockquote>
<h2 id="三、webpack的安装"><a href="#三、webpack的安装" class="headerlink" title="三、webpack的安装"></a>三、webpack的安装</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install webpack webpack-cli --save-dev;<br></code></pre></td></tr></table></figure>

<p>上面的命令代表同时安装了两个<code>webpack</code>的包，安装的时候<code>webpack-cli</code>是必装的，本次的安装以5版本为例子</p>
<p>安装完上面的代码以后，我们可以先做一个简单的测试</p>
<p><strong>Person.js代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span></span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">nickName</span>)</span>&#123;<br>        <span class="hljs-built_in">this</span>.nickName = nickName;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Person;<br></code></pre></td></tr></table></figure>

<p><strong>Student.js代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Person <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./Person.js&quot;</span>;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">nickName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>(nickName);<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好， 我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.nickName&#125;</span>`</span>);<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的性别是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sex&#125;</span>`</span>);<br>        &#125;, <span class="hljs-number">1000</span>);<br>    &#125;<br>&#125;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Student;<br></code></pre></td></tr></table></figure>

<p><strong>index.js代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Student <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./Student.js&quot;</span>;<br><span class="hljs-keyword">let</span> s = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张珊&quot;</span>,<span class="hljs-string">&quot;女&quot;</span>);<br>s.sayHello();<br></code></pre></td></tr></table></figure>

<p>现在我们只需要去执行<code>index.js</code>的代码就可以了，但是我们发现<code>nodejs</code>是不支持<code>esModule</code>它会报错，所以我们要使用<code>webpack</code>来整合一下</p>
<p>我们现在也都知道<code>index.js</code>就是整个程序的入口</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs json">&#123;<br>    <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;110802&quot;</span>,<br>    <span class="hljs-attr">&quot;version&quot;</span>: <span class="hljs-string">&quot;1.0.0&quot;</span>,<br>    <span class="hljs-attr">&quot;description&quot;</span>: <span class="hljs-string">&quot;&quot;</span>,<br>    <span class="hljs-attr">&quot;main&quot;</span>: <span class="hljs-string">&quot;index.js&quot;</span>,<br>    <span class="hljs-attr">&quot;scripts&quot;</span>: &#123;<br>        <span class="hljs-attr">&quot;test&quot;</span>: <span class="hljs-string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,<br>        <span class="hljs-attr">&quot;build&quot;</span>: <span class="hljs-string">&quot;webpack ./js/index.js -o ./dist&quot;</span><br>    &#125;,<br>    <span class="hljs-attr">&quot;keywords&quot;</span>: [],<br>    <span class="hljs-attr">&quot;author&quot;</span>: <span class="hljs-string">&quot;&quot;</span>,<br>    <span class="hljs-attr">&quot;license&quot;</span>: <span class="hljs-string">&quot;ISC&quot;</span>,<br>    <span class="hljs-attr">&quot;devDependencies&quot;</span>: &#123;<br>        <span class="hljs-attr">&quot;webpack&quot;</span>: <span class="hljs-string">&quot;^5.62.1&quot;</span>,<br>        <span class="hljs-attr">&quot;webpack-cli&quot;</span>: <span class="hljs-string">&quot;^4.9.1&quot;</span><br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>我们配置了上面的命令，然后执行了<code>npm run build</code>的脚本来进行打包</p>
<p>通过上面的配置，我们实现了简单的ES6模块化处理</p>
<p>上面的代码只是进行了简单的webpack的运行，并没有加载任何配置方式，这一种基本不使用。因为我们使用webpack除了整合项目以外，还要大量的使用第三方的<code>loader</code>及<code>plugins</code> 来完成更高级的功能，所以需要一些更精化的配置行为，这个时候我们就要开始真正的<code>webpack</code>配置了</p>
<h2 id="四、webpack的配置"><a href="#四、webpack的配置" class="headerlink" title="四、webpack的配置"></a>四、webpack的配置</h2><p>webpack的配置分为两种情况下面的配置</p>
<ol>
<li>生产环境</li>
<li>开发环境</li>
</ol>
<h3 id="1-生产环境配置"><a href="#1-生产环境配置" class="headerlink" title="1 . 生产环境配置"></a>1 . 生产环境配置</h3><p>无论是开发环境的配置还是生产环境的配置都要牢记webpack的四个核心点</p>
<p><strong>先在当前的目录下面新建一个js文件叫webpack.config.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//我们把这个文件看成是webpack的配置文件， 以后的webpack就使用这个配置文件</span><br><span class="hljs-comment">//webpack的配置文件里面，只使用CommonJS模块化规范</span><br><br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@type <span class="hljs-type">&#123;import(&quot;webpack&quot;).Configuration&#125;</span></span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> config = &#123;<br>    <span class="hljs-attr">mode</span>:<span class="hljs-string">&quot;development&quot;</span>,<br>    <span class="hljs-attr">entry</span>: path.join(__dirname, <span class="hljs-string">&quot;./js/index.js&quot;</span>),<br>    <span class="hljs-attr">output</span>: &#123;<br>        <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;bundle.js&quot;</span>,<br>        <span class="hljs-attr">path</span>: path.join(__dirname, <span class="hljs-string">&quot;./dist&quot;</span>),<br>        <span class="hljs-attr">publicPath</span>: <span class="hljs-string">&quot;./&quot;</span><br>    &#125;,<br>    <span class="hljs-attr">module</span>: &#123;&#125;,<br>    <span class="hljs-attr">plugins</span>: []<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = config;<br></code></pre></td></tr></table></figure>

<p>接下来在<code>package.json</code>里面去更改启动命令脚本</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-string">&quot;scripts&quot;</span>: &#123;<br>    <span class="hljs-string">&quot;test&quot;</span>: <span class="hljs-string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,<br>     <span class="hljs-string">&quot;build&quot;</span>: <span class="hljs-string">&quot;webpack --config ./webpack.config.js&quot;</span><br>&#125;,<br></code></pre></td></tr></table></figure>

<blockquote>
<p><code>webpack --config ./webpack.config.js</code>代表<code>webpack</code>在启动的时候使用某一个配置文件</p>
<p>在上面的配置文件里面，我们把<code>mode</code>换成了<code>development</code>，这样生成好的代码是没有经过压缩的 ，方便我们后期观察代码</p>
</blockquote>
<h3 id="2-babel的配置与使用"><a href="#2-babel的配置与使用" class="headerlink" title="2.babel的配置与使用"></a>2.babel的配置与使用</h3><p>我们已经可以配置好基本的的配置文件以后，现在需要提高JS代码的兼容，将ES6的代码转换成ES5的代码，但是<code>webpack</code>本身不具备任何功能，它需要借用于第三方的<code>loader</code>去完成，而<code>babel</code>就是专门用于转换ES代码的</p>
<p><img src="https://pic.imgdb.cn/item/618912042ab3f51d91896cce.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211108150612834"></p>
<p><img src="https://pic.imgdb.cn/item/618912af2ab3f51d918afa72.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211108151206080"></p>
<p>上图就是<code>babel</code>在线转换的例子，现在我们就可以在<code>webpack</code>当中去引用 这个<code>babel</code></p>
<p><strong>首先安装所需要的包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install babel-loader @babel/core --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>配置规则</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//放在上面的module:&#123;&#125;中 </span><br><span class="hljs-attr">rules</span>: [<br>     &#123;<br>         <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,<br>         exclude: <span class="hljs-regexp">/node_modules/</span>,<br>         loader: <span class="hljs-string">&quot;babel-loader&quot;</span><br>     &#125;<br> ]<br></code></pre></td></tr></table></figure>

<p>当我们去配置了像上面的规则 以后，我们发现js代码并没有转换成ES5的代码，为什么呢？</p>
<p><strong>配置babel的预设信息</strong></p>
<p>如果要让babel来处理自己的JS代码，一定要告诉它你的预设信息是什么（就是你最终想得到什么效果）</p>
<p><strong>在当前项目下面新建一个文件，取名为<code>.babelrc</code></strong></p>
<p><strong>下载<code>@babel/preset-env</code>这个包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install @babel/preset-env --save-dev<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这个包的作用就是根据当前配置来进行相应的转换</p>
</blockquote>
<p>当配置完上面的过程以后，我们的ES6的代码就可以转换成ES5的代码。如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>	<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`hello <span class="hljs-subst">$&#123;<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()&#125;</span>`</span>)<br>&#125;,<span class="hljs-number">1000</span>);<br></code></pre></td></tr></table></figure>

<p><strong>转换以后</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello &quot;</span>.concat(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()));<br>&#125;, <span class="hljs-number">1000</span>);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>ES6除了语法变了以外，还有什么东西？</p>
<p>它多了一些对象，如<code>Map,Set,Reflect,Proxy</code>，这些对象在ES5里面不存在，怎么办呢</p>
</blockquote>
<p>为了弥补ES5里面没有ES6些增的对象及语法特点，<code>babel</code>还需要去加载垫片<code>polyfill</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install @babel/polyfill core-js --save-dev<br></code></pre></td></tr></table></figure>

<ol>
<li><code>@babel/preset-env</code>根据当前的环境配置来实现ES语法代码的转换</li>
<li><code>@babel/polyfill</code>这个包主要是用于实现ES6当中的一些增的功能，如<code>Map,Set,Proxy,Symbol</code>等</li>
<li><code>core-js</code>这个包主要用于处理生成器函数，<code>async/await</code>的特点</li>
</ol>
<p>我们在项目的根目录下面创建 了一个<code>.babelrc</code>的文件，如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-string">&quot;presets&quot;</span>: [<br>        [<br>            <span class="hljs-string">&quot;@babel/preset-env&quot;</span>,<br>            &#123;<br>                <span class="hljs-string">&quot;useBuiltIns&quot;</span>:<span class="hljs-string">&quot;usage&quot;</span>,<br>                <span class="hljs-string">&quot;corejs&quot;</span>:<span class="hljs-string">&quot;3&quot;</span>,<br>                <span class="hljs-string">&quot;targets&quot;</span>: &#123;<br>                    <span class="hljs-string">&quot;browsers&quot;</span>: [<br>                        <span class="hljs-string">&quot;last 2 version&quot;</span>,<br>                        <span class="hljs-string">&quot;&gt; 1%&quot;</span>,<br>                        <span class="hljs-string">&quot;not dead&quot;</span><br>                    ]<br>                &#125;<br>            &#125;<br>        ]<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<ol>
<li><code>@babel/preset-env</code>代表设置预设信息</li>
<li><code>&quot;useBuiltIns&quot;:&quot;usage&quot;</code>使用了什么模块就加载什么包，这样打包的时候体积会小一些，它还有一个属性叫<code>entry</code>，这个属性则是代表在项目最开始的入口直接 导入所有的包，这样打包的速度会很慢</li>
<li><code>&quot;corejs&quot;:&quot;3&quot;</code>代表当前使用的<code>core-js</code>的版本是3</li>
<li><code>&quot;targets&quot;</code>代表当前代码生成的目录平台，<code>browsers</code>代表的是浏览器平台</li>
</ol>
</blockquote>
<h3 id="3-配置html-webpack-plugin"><a href="#3-配置html-webpack-plugin" class="headerlink" title="3.配置html-webpack-plugin"></a>3.配置html-webpack-plugin</h3><p>上面生成的JS代码最终都是要在html文件下面使用的，所以我们生成的js文件需要自动的插入到所需要的html文件当中，这个时候我们需要使用到第三方插件<code>html-webpack-plugin</code>,这个插件可以将生成好的文件自动的插入进去</p>
<p><strong>安装插件</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install html-webpack-plugin --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>使用插件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//我们把这个文件看成是webpack的配置文件， 以后的webpack就使用这个配置文件</span><br><span class="hljs-comment">//webpack的配置文件里面，只使用CommonJS模块化规范</span><br><br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><span class="hljs-keyword">const</span> HTMLWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;html-webpack-plugin&quot;</span>);<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@type <span class="hljs-type">&#123;import(&quot;webpack&quot;).Configuration&#125;</span></span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> config = &#123;<br>    <span class="hljs-attr">mode</span>: <span class="hljs-string">&quot;development&quot;</span>,<br>    <span class="hljs-attr">entry</span>: path.join(__dirname, <span class="hljs-string">&quot;./js/index.js&quot;</span>),<br>    <span class="hljs-attr">output</span>: &#123;<br>        <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;bundle.js&quot;</span>,<br>        <span class="hljs-attr">path</span>: path.join(__dirname, <span class="hljs-string">&quot;./dist&quot;</span>),<br>        <span class="hljs-attr">publicPath</span>: <span class="hljs-string">&quot;./&quot;</span><br>    &#125;,<br>    <span class="hljs-attr">module</span>: &#123;<br>        <span class="hljs-attr">rules</span>: [<br>            &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,<br>                exclude: <span class="hljs-regexp">/node_modules/</span>,<br>                loader: <span class="hljs-string">&quot;babel-loader&quot;</span><br>            &#125;<br>        ]<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>: [<br>        <span class="hljs-comment">//配置插件</span><br>        <span class="hljs-keyword">new</span> HTMLWebpackPlugin(&#123;<br>            <span class="hljs-comment">//模板文件的位置</span><br>            <span class="hljs-attr">template</span>: path.join(__dirname, <span class="hljs-string">&quot;./index.html&quot;</span>),<br>            <span class="hljs-comment">//生成新的文件名称</span><br>            <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;index.html&quot;</span>,<br>            <span class="hljs-comment">// 生成的css与js自动的插入进去</span><br>            <span class="hljs-attr">inject</span>: <span class="hljs-literal">true</span><br>        &#125;)<br>    ]<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = config;<br></code></pre></td></tr></table></figure>

<h3 id="4-配置clean-webpack-plugin"><a href="#4-配置clean-webpack-plugin" class="headerlink" title="4.配置clean-webpack-plugin"></a>4.配置<code>clean-webpack-plugin</code></h3><p>在我们的生成目录里面，会经常存在一些不需要使用的文件，这个时候如果我们手动的去清除会很危险，容易删除</p>
<p>现在我们可以使用<code>clean-webpack-plugin</code>它会自动的分析，将不需要使用的文件删除</p>
<p><strong>安装包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install clean-webpack-plugin --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>简写</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm i clean-webpack-plugin -D<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>完整</th>
<th>简写</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>install</td>
<td>i</td>
<td>安装包</td>
</tr>
<tr>
<td>uninstall</td>
<td>un</td>
<td>卸载包</td>
</tr>
<tr>
<td>–save</td>
<td>-S</td>
<td>保存</td>
</tr>
<tr>
<td>–save-dev</td>
<td>-D</td>
<td>开发环境保存</td>
</tr>
</tbody></table>
<p><strong>配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> &#123;CleanWebpackPlugin&#125; = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;clean-webpack-plugin&quot;</span>);<br><span class="hljs-keyword">const</span> config =&#123;<br>    <span class="hljs-comment">//省略代码....</span><br>    <span class="hljs-attr">plugins</span>:[<br>        <span class="hljs-keyword">new</span> CleanWebpackPlugin();<br>        <span class="hljs-comment">//省略代码....</span><br>    ]<br>&#125;<br><span class="hljs-built_in">module</span>.exports = config;<br></code></pre></td></tr></table></figure>

<h3 id="5-使用webpack处理css"><a href="#5-使用webpack处理css" class="headerlink" title="5.使用webpack处理css"></a>5.使用webpack处理css</h3><blockquote>
<p>这个东西可以看成是<code>css in js</code>的技术</p>
</blockquote>
<p>webpack本身是不能加载CSS代码，在JS里面也不能导入CSS代码，但是借用于<code>loader</code>可以实现这个效果</p>
<p><img src="https://pic.imgdb.cn/item/618912d32ab3f51d918b4b58.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211108170844022"></p>
<p><strong>安装loader</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install css-loader style-loader --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>配置规则</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//我们把这个文件看成是webpack的配置文件， 以后的webpack就使用这个配置文件</span><br><span class="hljs-comment">//webpack的配置文件里面，只使用CommonJS模块化规范</span><br><br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><span class="hljs-keyword">const</span> HTMLWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;html-webpack-plugin&quot;</span>);<br><span class="hljs-keyword">const</span> &#123; CleanWebpackPlugin &#125; = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;clean-webpack-plugin&quot;</span>);<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@type <span class="hljs-type">&#123;import(&quot;webpack&quot;).Configuration&#125;</span></span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> config = &#123;<br>    <span class="hljs-attr">mode</span>: <span class="hljs-string">&quot;development&quot;</span>,<br>    <span class="hljs-attr">entry</span>: path.join(__dirname, <span class="hljs-string">&quot;./js/index.js&quot;</span>),<br>    <span class="hljs-attr">output</span>: &#123;<br>        <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;bundle.js&quot;</span>,<br>        <span class="hljs-attr">path</span>: path.join(__dirname, <span class="hljs-string">&quot;./dist&quot;</span>),<br>        <span class="hljs-attr">publicPath</span>: <span class="hljs-string">&quot;./&quot;</span><br>    &#125;,<br>    <span class="hljs-attr">module</span>: &#123;<br>        <span class="hljs-attr">rules</span>: [<br>            &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,<br>                exclude: <span class="hljs-regexp">/node_modules/</span>,<br>                loader: <span class="hljs-string">&quot;babel-loader&quot;</span><br>            &#125;, &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css$/</span>,<br>                use: [<br>                    <span class="hljs-string">&quot;style-loader&quot;</span>,<br>                    <span class="hljs-string">&quot;css-loader&quot;</span><br>                ]<br>            &#125;<br>        ]<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>: [<br>        <span class="hljs-comment">//配置插件</span><br>        <span class="hljs-keyword">new</span> HTMLWebpackPlugin(&#123;<br>            <span class="hljs-comment">//模板文件的位置</span><br>            <span class="hljs-attr">template</span>: path.join(__dirname, <span class="hljs-string">&quot;./index.html&quot;</span>),<br>            <span class="hljs-comment">//生成新的文件名称</span><br>            <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;index.html&quot;</span>,<br>            <span class="hljs-comment">// 生成的css与js自动的插入进去</span><br>            <span class="hljs-attr">inject</span>: <span class="hljs-literal">true</span><br>        &#125;),<br>        <span class="hljs-keyword">new</span> CleanWebpackPlugin()<br>    ]<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = config;<br></code></pre></td></tr></table></figure>

<h3 id="6-使用postcss来处理CSS的兼容性"><a href="#6-使用postcss来处理CSS的兼容性" class="headerlink" title="6.使用postcss来处理CSS的兼容性"></a>6.使用postcss来处理CSS的兼容性</h3><p>这个是要使用第三方的工具来完成，这个工具就是<code>postcss</code></p>
<p><a target="_blank" rel="noopener" href="https://www.postcss.com.cn/">PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网</a></p>
<p><img src="https://pic.imgdb.cn/item/618cf8d02ab3f51d91758b2b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211109085024405"></p>
<p><strong>安装</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install postcss-loader --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css$/</span>,<br>        use: [<br>            <span class="hljs-string">&quot;style-loader&quot;</span>,<br>            <span class="hljs-string">&quot;css-loader&quot;</span>,<br>            <span class="hljs-string">&quot;postcss-loader&quot;</span><br>        ]<br>&#125;<br></code></pre></td></tr></table></figure>

<p>在<code>webpack</code>的规则当中添加如上的代码就可以了</p>
<p>但是当然配置完上面的东西以后，我们发现postcss并没有帮我们处理兼容性，所以…..？？？？？</p>
<p><code>postcss</code>如果要完成上面的兼容性转换功能，还需要设置一个<strong>预设信息</strong></p>
<p><strong>postcss预设信息的插件</strong></p>
<ol>
<li><code>postcss-import</code>如果在<code>css</code>里面发现了<code>@import</code>标签，同样进行处理</li>
<li><code>postcss-cssnext</code>提高CSS兼容性的插件，自动加前缀，自动转换代码</li>
<li><code>cssnano</code>可以将处理的CSS进一步的压缩</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install postcss-import postcss-cssnext cssnano --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>配置postcss的预设信息</strong></p>
<p>在当前项目下面新建一个文件叫<code>postcss.config.js</code>，文件名必须是这一样,配置信息如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//这里就是postcss的插件信息（预设信息）</span><br><span class="hljs-built_in">module</span>.exports = &#123;<br>    <span class="hljs-attr">plugins</span>: [<br>        <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;postcss-import&quot;</span>),<br>        <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;postcss-cssnext&quot;</span>),<br>        <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;cssnano&quot;</span>)<br>    ]<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="7-重新分离CSS"><a href="#7-重新分离CSS" class="headerlink" title="7. 重新分离CSS"></a>7. 重新分离CSS</h3><p>在之前的步骤里面，我们把CSS代码放入到JS里面通过<code>postcss</code>处理，提高兼容性，我们还需要再次将这些样式分离成一个单独的CSS文件，它需要使用到第三方的包<code>mini-css-extract-plugin</code></p>
<p><strong>安装</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install mini-css-extract-plugin --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> MiniCssExtractPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;mini-css-extract-plugin&quot;</span>);<br><br><span class="hljs-comment">//rules.....</span><br>&#123;<br>    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css$/</span>,<br>        use: [<br>            MiniCssExtractPlugin.loader,<br>            &#123;<br>                <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;css-loader&quot;</span>,<br>                <span class="hljs-attr">options</span>: &#123;<br>                    <span class="hljs-attr">importLoaders</span>: <span class="hljs-number">1</span><br>                &#125;<br>            &#125;,<br>            <span class="hljs-string">&quot;postcss-loader&quot;</span><br>        ]<br>&#125;<br><br><span class="hljs-comment">//plugins......</span><br> <span class="hljs-comment">//把CSS单独抽离出来 </span><br><span class="hljs-keyword">new</span> MiniCssExtractPlugin(&#123;<br>    <span class="hljs-comment">//抽离出来的CSS的文件名</span><br>    <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;css/index.[hash:8].css&quot;</span>,<br>    <span class="hljs-comment">// 是否忽略第三方插件的处理</span><br>    <span class="hljs-attr">ignoreOrder</span>: <span class="hljs-literal">false</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="9-webpack文件的处理"><a href="#9-webpack文件的处理" class="headerlink" title="9.webpack文件的处理"></a>9.webpack文件的处理</h3><p>如果在css样式里面使用了背景图片，字体等文件的时候，会有什么现象呢？</p>
<p>在现在的webpack5里面，已经可以自动的对文件进行了，但是处理得并不是很好，我们还是可以借用于第三方的工具去实现，这个工具就是<code>url-loader</code>和<code>file-loader</code></p>
<ul>
<li><code>url-loader</code>用于处理路径相关的问题</li>
<li><code>file-loader</code>用于处理文件，它会把涉及到的文件拷贝到目标目录</li>
</ul>
<p><strong>安装</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install url-loader file-loader --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>配置</strong></p>
<blockquote>
<p>这里的配置以webpack5为主，如果是webpack4，请参考标哥的网站<a target="_blank" rel="noopener" href="http://www.softeem.xin:8090/archives/webpack%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE2021#css%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87%E4%B8%8E%E5%AD%97%E4%BD%93%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86">webpack基础配置2021 | 杨标的博客 (softeem.xin)</a></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.(jpe?g|png|gif|svg|bmp)$/</span>,<br>        use: [<br>            &#123;<br>                <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;url-loader&quot;</span>,<br>                <span class="hljs-attr">options</span>: &#123;<br>                    <span class="hljs-comment">//小于8kb的图片就直接给我转成base64的格式</span><br>                    <span class="hljs-attr">limit</span>: <span class="hljs-number">8</span> * <span class="hljs-number">1024</span>,<br>                    <span class="hljs-comment">//生成新的文件的名称</span><br>                    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;[name].[hash:8].[ext]&quot;</span>,<br>                    <span class="hljs-comment">//新生成的图片文件放在img的目录下面</span><br>                    <span class="hljs-attr">outputPath</span>: <span class="hljs-string">&quot;img/&quot;</span>,<br>                    <span class="hljs-attr">esModule</span>: <span class="hljs-literal">false</span><br>                &#125;<br>            &#125;<br>        ],<br>        <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;javascript/auto&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/618cf93a2ab3f51d9175ad06.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211109112118778"></p>
<p>上图中一定要改变，不然背景图片显示不出来 </p>
<h3 id="10-webpack处理字体文件"><a href="#10-webpack处理字体文件" class="headerlink" title="10.webpack处理字体文件"></a>10.webpack处理字体文件</h3><p>处理字体与处理图片是一样的原理，因为字体的<code>@font-face</code>里面也有<code>url</code>选项</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.(ttf|eot|woff|woff2)$/</span>,<br>        use: [<br>            &#123;<br>                <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;url-loader&quot;</span>,<br>                <span class="hljs-attr">options</span>: &#123;<br>                    <span class="hljs-comment">//小于8kb的图片就直接给我转成base64的格式</span><br>                    <span class="hljs-attr">limit</span>: <span class="hljs-number">8</span> * <span class="hljs-number">1024</span>,<br>                    <span class="hljs-comment">//生成新的文件的名称</span><br>                    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;[name].[hash:8].[ext]&quot;</span>,<br>                    <span class="hljs-comment">//新生成的图片文件放在fonts的目录下面</span><br>                    <span class="hljs-attr">outputPath</span>: <span class="hljs-string">&quot;fonts/&quot;</span>,<br>                    <span class="hljs-attr">esModule</span>: <span class="hljs-literal">false</span><br>                &#125;<br>            &#125;<br>        ],<br>        <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;javascript/auto&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="11-配置打包的进度条"><a href="#11-配置打包的进度条" class="headerlink" title="11.配置打包的进度条"></a>11.配置打包的进度条</h3><p>因为打包的速度非常慢，我们希望看到打包的时候可以使用进度条的插件来看到进度</p>
<p><strong>安装</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install chalk progress-bar-webpack-plugin --save-dev<br></code></pre></td></tr></table></figure>

<ul>
<li><code>chalk</code>可以在控制台显示彩色的字体</li>
<li><code>progress-bar-webpack-plugin</code>可以显示进度条</li>
</ul>
<p><strong>配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//导入打包进度条的插件</span><br><span class="hljs-keyword">const</span> ProgressBarWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;progress-bar-webpack-plugin&quot;</span>);<br><span class="hljs-comment">//导入画笔包，用于设置进度条文字的颜色</span><br><span class="hljs-keyword">const</span> chalk = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;chalk&quot;</span>);<br><br><span class="hljs-comment">//在plugins里面加入下面的代码</span><br><span class="hljs-keyword">new</span> ProgressBarWebpackPlugin(&#123;<br>     <span class="hljs-attr">format</span>: chalk.green(<span class="hljs-string">&quot;进度：&quot;</span>) + chalk.white(<span class="hljs-string">&quot;[:bar]&quot;</span>) + chalk.green(<span class="hljs-string">&quot;:percent&quot;</span>) + chalk.red(<span class="hljs-string">&quot;(:elapsed seconds)&quot;</span>),<br>     <span class="hljs-attr">clear</span>: <span class="hljs-literal">false</span><br> &#125;)<br></code></pre></td></tr></table></figure>



<blockquote>
<p>至此，我们的生产环境就完成了，但是最后要注意，要在webpack.config.js的配置里面将<code>mode</code>重新设置为<code>production</code>,这样在打包代码的时候，它会把CSS代码及JS代的注释 去掉，并压缩代码，混淆代码</p>
</blockquote>
<h3 id="五、webpack开发环境配置"><a href="#五、webpack开发环境配置" class="headerlink" title="五、webpack开发环境配置"></a>五、webpack开发环境配置</h3><p>上面的配置是生产环境的配置，这种之情况之下并不适合于将开发阶段，因为开发的时候我们是需要尽快的得到编译效果，然后最终开发完成以后生成生成编译后的代码，所以webpack也考虑到了这一点，它提供一种模型叫开发环境配置</p>
<p><img src="https://pic.imgdb.cn/item/618cf98c2ab3f51d9175c9b2.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211109134946303"></p>
<p><strong>安装</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install webpack-dev-server --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>开发环境的配置</strong></p>
<p>开发的环境的配置与生产环境的配置有90%的代码都是相同的，只有部分不一样，所以可以直接在原来的文件上面改一改</p>
<p><strong>webpack.config.dev.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><span class="hljs-keyword">const</span> HTMLWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;html-webpack-plugin&quot;</span>);<br><span class="hljs-keyword">const</span> &#123; CleanWebpackPlugin &#125; = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;clean-webpack-plugin&quot;</span>);<br><span class="hljs-keyword">const</span> chalk = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;chalk&quot;</span>);<br><span class="hljs-keyword">const</span> ProgressBarWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;progress-bar-webpack-plugin&quot;</span>);<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@type <span class="hljs-type">&#123;import(&quot;webpack&quot;).Configuration&#125;</span></span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> config = &#123;<br>    <span class="hljs-attr">mode</span>: <span class="hljs-string">&quot;development&quot;</span>,<br>    <span class="hljs-attr">entry</span>: path.join(__dirname, <span class="hljs-string">&quot;./js/index.js&quot;</span>),<br>    <span class="hljs-attr">output</span>: &#123;<br>        <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;js/bundle.js&quot;</span>,<br>        <span class="hljs-attr">path</span>: path.join(__dirname, <span class="hljs-string">&quot;./dist&quot;</span>)<br>    &#125;,<br>    <span class="hljs-attr">module</span>: &#123;<br>        <span class="hljs-attr">rules</span>: [<br>            &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,<br>                exclude: <span class="hljs-regexp">/node_modules/</span>,<br>                loader: <span class="hljs-string">&quot;babel-loader&quot;</span><br>            &#125;, &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css$/</span>,<br>                use: [<br>                    <span class="hljs-string">&quot;style-loader&quot;</span>,<br>                    &#123;<br>                        <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;css-loader&quot;</span>,<br>                        <span class="hljs-attr">options</span>: &#123;<br>                            <span class="hljs-attr">importLoaders</span>: <span class="hljs-number">1</span><br>                        &#125;<br>                    &#125;,<br>                    <span class="hljs-string">&quot;postcss-loader&quot;</span><br>                ]<br>            &#125;, &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.s[ca]ss$/</span>,<br>                use: [<br>                    <span class="hljs-string">&quot;style-loader&quot;</span>,<br>                    &#123;<br>                        <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;css-loader&quot;</span>,<br>                        <span class="hljs-attr">options</span>: &#123;<br>                            <span class="hljs-attr">importLoaders</span>: <span class="hljs-number">2</span><br>                        &#125;<br>                    &#125;,<br>                    <span class="hljs-string">&quot;postcss-loader&quot;</span>,<br>                    <span class="hljs-string">&quot;sass-loader&quot;</span><br>                ]<br>            &#125;, &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.(jpe?g|png|gif|svg|bmp)$/</span>,<br>                use: [<br>                    &#123;<br>                        <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;url-loader&quot;</span>,<br>                        <span class="hljs-attr">options</span>: &#123;<br>                            <span class="hljs-comment">//小于8kb的图片就直接给我转成base64的格式</span><br>                            <span class="hljs-attr">limit</span>: <span class="hljs-number">8</span> * <span class="hljs-number">1024</span>,<br>                            <span class="hljs-comment">//生成新的文件的名称</span><br>                            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;[name].[hash:8].[ext]&quot;</span>,<br>                            <span class="hljs-comment">//新生成的图片文件放在img的目录下面</span><br>                            <span class="hljs-attr">outputPath</span>: <span class="hljs-string">&quot;img/&quot;</span>,<br>                            <span class="hljs-attr">esModule</span>: <span class="hljs-literal">false</span><br>                        &#125;<br>                    &#125;<br>                ],<br>                <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;javascript/auto&quot;</span><br>            &#125;, &#123;<br>                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.(ttf|eot|woff|woff2)$/</span>,<br>                use: [<br>                    &#123;<br>                        <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;url-loader&quot;</span>,<br>                        <span class="hljs-attr">options</span>: &#123;<br>                            <span class="hljs-comment">//小于8kb的图片就直接给我转成base64的格式</span><br>                            <span class="hljs-attr">limit</span>: <span class="hljs-number">8</span> * <span class="hljs-number">1024</span>,<br>                            <span class="hljs-comment">//生成新的文件的名称</span><br>                            <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;[name].[hash:8].[ext]&quot;</span>,<br>                            <span class="hljs-comment">//新生成的图片文件放在fonts的目录下面</span><br>                            <span class="hljs-attr">outputPath</span>: <span class="hljs-string">&quot;fonts/&quot;</span>,<br>                            <span class="hljs-attr">esModule</span>: <span class="hljs-literal">false</span><br>                        &#125;<br>                    &#125;<br>                ],<br>                <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;javascript/auto&quot;</span><br>            &#125;<br>        ]<br>    &#125;,<br>    <span class="hljs-attr">plugins</span>: [<br>        <span class="hljs-comment">//配置插件</span><br>        <span class="hljs-keyword">new</span> HTMLWebpackPlugin(&#123;<br>            <span class="hljs-attr">template</span>: path.join(__dirname, <span class="hljs-string">&quot;./index.html&quot;</span>),<br>            <span class="hljs-attr">filename</span>: <span class="hljs-string">&quot;index.html&quot;</span>,<br>            <span class="hljs-attr">inject</span>: <span class="hljs-literal">true</span><br>        &#125;),<br>        <span class="hljs-keyword">new</span> CleanWebpackPlugin(),<br>        <span class="hljs-keyword">new</span> ProgressBarWebpackPlugin(&#123;<br>            <span class="hljs-attr">format</span>: chalk.green(<span class="hljs-string">&quot;进度：&quot;</span>) + chalk.white(<span class="hljs-string">&quot;[:bar]&quot;</span>) + chalk.green(<span class="hljs-string">&quot;:percent&quot;</span>) + chalk.red(<span class="hljs-string">&quot;(:elapsed seconds)&quot;</span>),<br>            <span class="hljs-attr">clear</span>: <span class="hljs-literal">false</span><br>        &#125;)<br>    ],<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;import(&quot;webpack-dev-server&quot;).Configuration&#125;</span></span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-attr">devServer</span>: &#123;<br>        <span class="hljs-attr">port</span>: <span class="hljs-number">9999</span>,<br>        <span class="hljs-attr">allowedHosts</span>: <span class="hljs-string">&quot;all&quot;</span>,<br>        <span class="hljs-attr">static</span>: &#123;<br>            <span class="hljs-attr">directory</span>: path.join(__dirname, <span class="hljs-string">&quot;./dist&quot;</span>)<br>        &#125;,<br>        <span class="hljs-attr">client</span>: &#123;<br>            <span class="hljs-attr">overlay</span>: <span class="hljs-literal">true</span>,<br>            <span class="hljs-attr">progress</span>: <span class="hljs-literal">true</span><br>        &#125;,<br>        <span class="hljs-comment">// 很重要，开启热重启，保存代码以后，页面会太自动刷新</span><br>        <span class="hljs-comment">// hot: true</span><br>    &#125;<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = config;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>注意事项：</p>
<ol>
<li>它不需要分离CSS代码，所以不需要使用<code>mini-css-extract-plugin</code>这个插件，转而继续使用<code>style-laoder</code></li>
<li>要配置<code>devServer</code>，具备配置可以参考官网</li>
<li>不要配置<code>publicPath</code></li>
</ol>
</blockquote>
<p>当把配置文件写好了以后，我们就可以在<code>package.json</code>里面来配置我们的启动命令</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-string">&quot;scripts&quot;</span>: &#123;<br>    <span class="hljs-attr">&quot;test&quot;</span>: <span class="hljs-string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,<br>    <span class="hljs-attr">&quot;build&quot;</span>: <span class="hljs-string">&quot;webpack --config ./webpack.config.js&quot;</span>,<br>    <span class="hljs-attr">&quot;dev&quot;</span>: <span class="hljs-string">&quot;webpack-dev-server --config ./webpack.config.dev.js&quot;</span><br>&#125;,<br></code></pre></td></tr></table></figure>

<p>配置好上面的命令以后，我们就可以通过<code>npm run dev</code>来启动开发环境</p>
<h3 id=""><a href="#" class="headerlink" title=""></a></h3><hr>
<h3 id="ES6模块化扩展"><a href="#ES6模块化扩展" class="headerlink" title="ES6模块化扩展"></a>ES6模块化扩展</h3><p>在之前我们讲ESModule的时候，我们提到了两个关键字<code>export/import</code>,但是并没有讲完</p>
<p>在之前的<code>CoomonJS</code>模块化里面，如果要导出多个变量我们可以使用下面的方式</p>
<p><strong>a.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> userName = <span class="hljs-string">&quot;张三&quot;</span>;<br><span class="hljs-keyword">const</span> userAge = <span class="hljs-number">18</span>;<br><span class="hljs-built_in">module</span>.exports = &#123;<br>    userName,<br>    userAge<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>b.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> obj = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./a.js&quot;</span>);<br><br><span class="hljs-built_in">console</span>.log(obj.userName);<br><span class="hljs-built_in">console</span>.log(obj.userAge);<br></code></pre></td></tr></table></figure>

<p>当然也可以在导入的时候直接解构</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> &#123;userAge,userName&#125; = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./a.js&quot;</span>);<br><span class="hljs-built_in">console</span>.log(userAge,userName);<br></code></pre></td></tr></table></figure>

<p><span style="color:red;font-weight:bold">如果在ESModule里面，如果导出多个呢</span></p>
<p>在ESModule里面，有一个关键字<code>default</code>，叫默认导出，默认只允许找出一个，如果要导出多个，能不则使用default，现在我们采取 最常规的思维去测试</p>
<p><strong>a.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> userName = <span class="hljs-string">&quot;张珊&quot;</span>;<br><br><span class="hljs-keyword">const</span> userSex = <span class="hljs-string">&quot;女&quot;</span>;<br><br><span class="hljs-keyword">const</span> obj= &#123;<br>    userName,<br>    userSex<br>&#125;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> obj;<br></code></pre></td></tr></table></figure>

<p><strong>b.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> obj <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./a.js&quot;</span>;<br><br><span class="hljs-built_in">console</span>.log(obj.userName);<br><span class="hljs-built_in">console</span>.log(obj.userSex);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>当我们使用上面的思维方式去使用的时候是没有任何问题的，我们现在尝试在导出的时候直接解构</p>
</blockquote>
<p><strong>b.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123;userName,userSex&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./a.js&quot;</span>;<br><br><span class="hljs-built_in">console</span>.log(userName,userSex);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这个时候我们就发现打印的两个值都是<code>undefined</code>，这是什么呢</p>
</blockquote>
<p><span style="color:red;font-weight:bold;font-size:18px">在ESModule里面，通过<code>default</code>导出的东西是不能进行直接解构，如果真的需要导出多个，则应该像下面这种试使用</span></p>
<p><strong>a.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> userName = <span class="hljs-string">&quot;张珊&quot;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> userSex = <span class="hljs-string">&quot;女&quot;</span>;<br><br><span class="hljs-keyword">const</span> userAge = <span class="hljs-number">18</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> userAge;<br><br></code></pre></td></tr></table></figure>

<p><strong>b.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> userAge,&#123; userName, userSex &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./a.js&quot;</span>;<br><span class="hljs-built_in">console</span>.log(userName, userSex);<br><span class="hljs-built_in">console</span>.log(userAge);<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>总结一点</strong>：</p>
<ol>
<li>没有加<code>default</code>导出的，就要使用解构来导入，加了<code>default</code>了就不需要解构</li>
<li>一个文件里面只能一个默认导出</li>
</ol>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/6189129e2ab3f51d918ace2f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211108140329812"></p>
<p>在导入的时候还可以使用上面的方式导入</p>
<h3 id="ESModule与CommonJS的结合"><a href="#ESModule与CommonJS的结合" class="headerlink" title="ESModule与CommonJS的结合"></a>ESModule与CommonJS的结合</h3><p><strong>第一种情况：CommonJS导出 ，ESModule导入</strong></p>
<p><strong>a.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> userName = <span class="hljs-string">&quot;张珊&quot;</span>;<br><span class="hljs-keyword">const</span> userSex = <span class="hljs-string">&quot;女&quot;</span>;<br><span class="hljs-built_in">module</span>.exports = &#123;<br>    userName,<br>    userSex<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>b.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// const &#123;userName,userSex&#125; = require(&quot;./a.js&quot;);</span><br><span class="hljs-comment">//按正常情况下应该像上面这种方式导入</span><br><span class="hljs-comment">//但是能不能使用ESModule导入</span><br><br><span class="hljs-keyword">import</span> &#123;userName,userSex&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./a.js&quot;</span>;<br><span class="hljs-built_in">console</span>.log(userName,userSex);<br></code></pre></td></tr></table></figure>

<p><strong>第二种情况：使用ESModule导出 ，使用CommonJS导入</strong></p>
<p><strong>a.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> userName = <span class="hljs-string">&quot;张三&quot;</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> userSex = <span class="hljs-string">&quot;男&quot;</span>;<br><br><span class="hljs-keyword">const</span> userAge = <span class="hljs-number">18</span>;<br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> userAge;<br><br><span class="hljs-comment">//这时是使用ESModule导出的</span><br></code></pre></td></tr></table></figure>

<p><strong>b.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//按照原本ESModule的导入</span><br><span class="hljs-comment">// import userAge,&#123;userName,userSex&#125; from &quot;./a.js&quot;;</span><br><br><span class="hljs-comment">//我们想使用CommonJS来导入</span><br><span class="hljs-keyword">const</span> obj = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./a.js&quot;</span>);<br><span class="hljs-built_in">console</span>.log(obj.userName);<br><span class="hljs-built_in">console</span>.log(obj.userSex);<br><br><span class="hljs-built_in">console</span>.log(obj.default);<br></code></pre></td></tr></table></figure>




            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/HTML/">HTML</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS/">CSS</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Sass/">Sass</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/12/06/%E5%AE%BF%E8%88%8D%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">宿舍管理系统开发笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/11/30/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6-Vue%E5%9F%BA%E7%A1%80/">
                        <span class="hidden-mobile">Vue基础</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
